<template>
  <div class="form-container">
    <el-card class="form-card">
      <el-form
        ref="FreebackFormRef"
        :model="formData"
        label-width="100px"
        class="Freebank"
        :rules="rules"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="formData.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="formData.phone" placeholder="请输入联系方式" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input
            v-model="formData.content"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <!-- <el-form-item label="材料" prop="supply">
          <el-upload
            class="upload-demo"
            action="/api/feedback/add"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :onSuccess="handleSuccess"
            :onError="handleError"
            :file-list="fileList"
            list-type="text"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </template>
          </el-upload>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="handleSubmit" class="el-button"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { addFreeback } from "@/api/suggestion/index";
import { FreebackForms, FreebackPageVO } from "@/api/suggestion/types";

// const formData = ref({
//   name: "",
//   contact: "",
//   content: "",
//   material: "",
// });
const queryFormRef = ref(ElForm);
const loading = ref(false);
const FreebackList = ref<FreebackPageVO[]>();

// const FreebackFormRef = ref(ElForm);

const formData = reactive<FreebackForms>({
  id: "",
  name: "",
  phone: "",
  content: "",
  title: "",
  // supply: "",
});

/** 重置表单 */
function resetForm() {
  FreebackFormRef.value.resetFields();
  FreebackFormRef.value.clearValidate();

  formData.id = "";
  formData.username = "";
  formData.workId = "";
  formData.content = "";
  formData.tile = "";
  // formData.supply = "";
}

//验证
const rules = reactive({
  title: [
    {
      required: true,
      message: "请填写标题",
      trigger: "blur",
    },
  ],
  content: [{ required: true, message: "请填写内容", trigger: "blur" }],
  name: [
    {
      required: true,
      pattern: /^([\u4e00-\u9fa5]{1,20})$/,
      message: "请输入正确的名称",
      trigger: "blur",
    },
  ],
  phone: [
    {
      required: true,
      message: "请输入正确的联系方式",
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      trigger: "blur",
    },
  ],
});

const FreebackFormRef = ref(ElForm);

/** 新增修改保存提交 */
function handleSubmit() {
  FreebackFormRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      // const FreebackId = formData.value.id;
      ElMessageBox.confirm("确认增加?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        addFreeback(formData)
          .then(() => {
            ElMessage.success("新增成功");
            closeDialogs();
            resetQuery();
          })
          .finally(() => (loading.value = false));
      });
    }
  });
}

// const fileList = ref([]);

// const handlePreview = (file: any) => {
//   console.log("preview", file);
// };

// const handleRemove = (file: any, fileList: any) => {
//   console.log("remove", file, fileList);
// };

// const handleSuccess = (response: any, file: any, fileList: any) => {
//   console.log("success", response, file, fileList);
// };

// const handleError = (err: any, file: any, fileList: any) => {
//   console.error("error", err, file, fileList);
// };

// const submitForm = () => {
//   // 表单验证逻辑
//   console.log("Form submitted:", formData.value);
// };
</script>

<style>
.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
}

.form-card {
  width: 500px;
}

.demo-form-styl {
  max-width: 400px;
  margin: 0 auto;
}

.upload-demo {
  margin-top: 10px;
}
.el-button {
  margin-left: 60px;
}
</style>
